import React, { Component } from 'react'
import { Table, Tag, Space,Button, Modal } from 'antd';
import { Form, Input } from 'antd';

import axios from "axios"
const columns = [
  {
    title: '姓名',
    dataIndex: 'name1',
    key: 'name',
  },
  {
    title: '地址',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: '日期',
    dataIndex: 'date',
    key: 'date',
  },

  {
    title: 'Action',
    key: 'action',
    render: (text, record) => (
    
      <Space size="middle">
        <a >Invite</a>
        <a>Delete</a>
      
      </Space>
    ),
  },
];


class Table1 extends Component {
   state = {
     eitIndex:0,
     bianji:"新增",
     editform:{}, // 用于保保存编辑回显得对象
     arr:[],
     selectedRowKeys: [], // Check here to configure the default column
     loading: false,
     isModalVisible:false, // 控制弹窗显示隐藏的变量
     columns: [
      {
        title: '姓名',
        dataIndex: 'name1',
        key: 'name',
      },
      {
        title: '地址',
        dataIndex: 'address',
        key: 'address',
      },
      {
        title: '日期',
        dataIndex: 'date',
        key: 'date',
      },
    
      {
        title: 'Action',
        key: 'action',
        render: (text, record,index) => (
        
          <Space size="middle">
            <a onClick={this.edit.bind(this,record,index)}>编辑</a>
            <a onClick={this.del.bind(this,index)}>删除</a>
          
          </Space>
        ),
      },
    ]
   }
  
  // onSelectChange = (selectedRowKeys,b) => {
  //   console.log( selectedRowKeys,b);
  //   this.setState({ selectedRowKeys });
  //   this.state.arr.forEach((item,index)=>{
  //        b.forEach((ite,ind)=>{
  //          if (item.key == ite.key) {
  //            item.flag = true
  //          }
  //        })
  //   })
  //   this.setState({
  //     arr: this.state.arr
  //   })
  // };
  
  // 编辑得函数
  edit(item,ind){
    this.setState({
      bianji:"编辑",
      eitIndex:ind
    })
    console.log(item)
    this.setState({
      isModalVisible:true
    })
    this.myref.setFieldsValue(item) // 用于form表单得回显
  }


  // 删除的函数
  del(ind){
    console.log(ind,11111)
     let crr = [...this.state.arr]
      crr.splice(ind,1)
     this.setState({
       arr:crr
     })
  }
onFinish(values) {   // 表单提交成功得方法
     if (this.state.bianji == "新增") {
        values.key = this.state.arr.length+1
        let arr = [...this.state.arr,values]
        this.setState({
          arr,
          isModalVisible:false
        })
      } else {
        let arr = [...this.state.arr,values];
        arr[this.state.eitIndex] = values
        this.setState({
          arr,
          isModalVisible:false
        })
      }
   
  };
   componentDidMount(){
      axios.get("/list1").then(res=>{
        console.log(res.data.list);
        this.setState({
          arr:res.data.list
        })
      })
   }
   // 点击新增得方法
   addFn(){
      this.showModal()
   }
  showModal() {
    this.setState({
      isModalVisible:true
    })
  };

 handleOk () {
  this.setState({
    isModalVisible:false
  })
  };

   handleCancel  () {
    this.setState({
      isModalVisible:false
    })
  };
  render() {
    const { loading, selectedRowKeys } = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
    };
    return (
      <div>
        <Button onClick={this.addFn.bind(this)}>增加</Button>
        {/* dataSource表示要渲染得数据 columns表示列 */}
        <Table columns={this.state.columns} dataSource={this.state.arr}/>
        <Modal forceRender title={this.state.bianji} visible={this.state.isModalVisible} onOk={this.handleOk.bind(this)} onCancel={this.handleCancel.bind(this)} footer={null} destroyOnClose={true}>
        <Form
              name="basic"
              preserve={false}
              onFinish={this.onFinish.bind(this)}
              autoComplete="off"
              ref={(ref)=> this.myref = ref}
              id="form"

        >
            <Form.Item
              label="姓名"
              name="name1"
            >
              <Input />
            </Form.Item>
            <Form.Item
              label="地址"
              name="address"
            >
              <Input />
            </Form.Item>
            <Form.Item
              label="日期"
              name="date"
            >
              <Input />
            </Form.Item>

                  <Form.Item
                    wrapperCol={{
                      offset: 8,
                      span: 16,
                    }}
                  >
                    <Button type="primary" htmlType="submit">
                      Submit
                    </Button>
                  </Form.Item>
                </Form>
         </Modal>
      </div>
    )
  }
}

export default Table1